<template>
  <div class="dt-topic">
    <div class="header">
      <van-nav-bar title="" fixed placeholder :border="false">
        <template #left>
          <van-icon name="arrow-left" size="18" color="#FFFFFF" />
        </template>
        <template #right>
          <span style="color: #ffffff; font-size: 5">⋮</span>
        </template>
      </van-nav-bar>
      <!-- 特殊话题 -->
      <div class="special">
        <special-topic />
      </div>
      <!-- 普通话题 -->
      <!-- <div class="normal">
        <span># 话题</span>
        <div>
          <head-stack />
          &nbsp;&nbsp;9999&nbsp;次浏览
        </div>
      </div> -->
    </div>
    <div class="focus">
      <span>9999&nbsp;人关注</span>
      <head-stack>
        <template #right>
          &nbsp;&nbsp;活跃度&nbsp;
          <van-image width="4px" height="8px" :src="require('@/assets/image/next-4-8.png')" />
        </template>
      </head-stack>
    </div>
    <!-- 切换 -->
    <van-tabs v-model:active="active" shrink title-active-color="#FB7299">
      <van-tab title="最新"></van-tab>
      <van-tab title="热门"></van-tab>
    </van-tabs>
    <!-- 内容 -->
    <div class="container">
      <div @scroll="initScroll">
        <topic-el v-for="index in 10" :key="index" :genre="index % 2 == 0 ? 1 : 2">
          <template #right>
            <van-button icon="plus" type="primary" color="#D74F81" plain round size="small" style="margin-left: auto"
              >关注</van-button
            >
          </template>
        </topic-el>
      </div>
    </div>
    <!-- 发布动态 -->
    <div class="release">
      <van-image width="20px" height="18px" :src="require('@/assets/image/camera-20-19.png')" />
      &nbsp;&nbsp;&nbsp;发布动态
    </div>
  </div>
</template>

<script>
import TopicEl from './component/topicEl.vue'
import SpecialTopic from './component/specialTopic.vue'
import HeadStack from './component/headStack.vue'
import { ref } from '@vue/reactivity'
export default {
  name: 'DetailTopic',
  setup() {
    const active = ref(0)
    return {
      active
    }
  },
  components: {
    TopicEl,
    SpecialTopic,
    HeadStack
  }
}
</script>

<style scoped lang='scss'>
@import '../style/mixin.scss';
.dt-topic {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .header {
    flex-shrink: 0;
    background: url('../../../assets/image/topic-bg.png') no-repeat;
    background-size: cover;
    z-index: 9;
    padding: 16px;
    ::v-deep .van-nav-bar {
      z-index: 3;
      background-color: initial;
    }
    .special {
      .focus {
        @include flex-box(space-between, center);
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #c8c9cc;
      }
    }
  }
  .normal {
    flex-shrink: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    & > div {
      font-weight: 400;
      font-size: 10px;
      line-height: 24px;
      color: #e7e8ea;
      margin-top: 16px;
      @include flex-box(flex-start, center);
    }
  }
  .focus {
    height: 40px;
    flex-shrink: 0;
    background: #f7f7f7;
    @include flex-box(space-between, center);
    padding: 0px 16px;
    font-weight: 400;
    font-size: 10px;
    text-align: right;
    color: #646566;
    & > div {
      display: flex;
      align-items: center;
    }
  }
  .container {
    position: relative;
    overflow: hidden;
    & > div {
      height: 100%;
      overflow-y: auto;
    }
    ::v-deep .van-button {
      height: 24px;
      @include flex-box('center', center);
      font-size: 12px;
    }
    ::v-deep .van-icon {
      font-size: 12px;
    }
  }
  .release {
    flex-shrink: 0;
    font-weight: 500;
    font-size: 14px;
    height: 60px;
    color: #323233;
    @include flex-box(center, center);
  }
  ::v-deep .van-tabs__line {
    background-color: #fb7299;
    width: 24px;
    height: 2px;
  }
}
</style>